<template>
  <view class="SongTypeList">
    <scroll-view scroll-y="true" @scrolltolower="scrolltolower" class="scroll">
      <view class="Type">
        <view class="TypeList" v-for="item in TypeList" :key="item.id" @click="navigatorToDetail(item.id)">
          <view class="zzz">
            <image :src="item.coverImgUrl" mode="widthFix"></image>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'songType-list',
  created() {
    uni.$on('name', data => {
      this.name = data
      this.getTypeSongList(this.name, this.limit)
    })
  },
  
  data() {
    return {
      TypeList: [],
      limit: 12,
      name: '',
      totalPage: 0,
      Page: 1
    }
  },
  methods: {
    scrolltolower() {
      if (this.Page >= this.totalPage) {
        uni.showToast({
          title: '没有下一页了'
        })
      } else {
        this.limit+=12;
        this.Page++
        this.getTypeSongList(this.name, this.limit)
      }
    },
    async getTypeSongList(cat, limit) {
      const { data: res } = await uni.$http.get('top/playlist/highquality', { cat, limit })
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('分类歌单列表获取失败')
      this.TypeList = res.playlists
      this.totalPage = Math.ceil(res.total / 12)
      // console.log(this.totalPage);
    },
    navigatorToDetail(id) {
      uni.navigateTo({
        url: '/subpkg/songs_list_detail/songs_list_detail?id=' + id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.Type {
  display: flex;
  flex-wrap: wrap;
}
.TypeList {
  display: flex;
  flex: 2;
  margin: 20rpx;
}
.TypeList image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}
.zzz text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.scroll{
  height: 100vh;
}
</style>
